﻿<!--
> Muaz Khan     - www.MuazKhan.com
> MIT License   - www.WebRTC-Experiment.com/licence
> Documentation - github.com/muaz-khan/WebRTC-Experiment/tree/master/navigator.customGetUserMediaBar
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>navigator.customGetUserMediaBar.js : Keep Users Privacy! ® Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <link rel="stylesheet" href="//www.webrtc-experiment.com/style.css">
        
        <style>
            audio {
                vertical-align: bottom;
                width: 10em;
            }

            video {
                max-width: 100%;
                vertical-align: top;
            }

            input {
                border: 1px solid #d9d9d9;
                border-radius: 1px;
                font-size: 2em;
                margin: .2em;
                width: 30%;
            }

            p, .inner { padding: 1em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }

            label {
                display: inline-block;
                width: 8em;
            }
        </style>
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>
        
        <!-- script used to display custom notification bar! -->
        <script src="https://www.webrtc-experiment.com/navigator.customGetUserMediaBar.js"> </script>
    </head>

    <body>
        <article>
            <header style="text-align: center;">
                <h1>
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/navigator.customGetUserMediaBar">navigator.customGetUserMediaBar.js</a>
                    : Keep Users Privacy!
                    ® <a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>
                </h1>            
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                    
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                    
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>

            <div class="github-stargazers"></div>
            
            <section class="experiment">
                <img src="//www.webrtc-experiment.com/images/navigator.customGetUserMediaBar.gif" style="width:100%;" />
                <button id="invoke-customGetUserMediaBar" style="font-size:2em;">Invoke navigator.customGetUserMediaBar</button>
            </section>
            
            <script>
                document.querySelector('#invoke-customGetUserMediaBar').onclick = function() {
                    var button = this;
                    button.disabled = true;
                    
                    var mediaConstraints = {
                        audio: true,
                        video: true
                    };
                    
                    // navigator.customGetUserMediaBar(mediaConstraints, success_callback, failure_callback);
                    // arg1==mediaConstraints::: {audio:true, video:true}
                    // arg2==success_callback::: user accepted the request
                    // arg3==failure_callback::: user denied   the request

                    navigator.customGetUserMediaBar(mediaConstraints, function () {

                        // now you can invoke "getUserMedia" to seamlessly capture user's media
                        if(!!navigator.webkitGetUserMedia) {
                            navigator.webkitGetUserMedia(mediaConstraints, success_callback, failure_callback);
                        }
                        else navigator.mozGetUserMedia(mediaConstraints, success_callback, failure_callback);

                    }, function () {

                        // user clicked "Deny" or "x" button
                        // throw new Error('PermissionDeniedError');
                        alert('PermissionDeniedError: User denied permission.');
                        button.disabled = false;
                    });
                    
                    function success_callback(stream) {
                        var video = document.createElement('video');
                        video.srcObject = stream;
                        video.controls = true;
                        video.style.maxWidth = '100%';
                        button.parentNode.appendChild(video);
                        video.play();
                    }
                    
                    function failure_callback(error) {
                        alert( JSON.stringify(error, null, '\t') );
                    }
                };
            </script>
        
            <section class="experiment">
                <h2 class="header">
                    How to use <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/navigator.customGetUserMediaBar" target="_blank">navigator.customGetUserMediaBar</a>?</h2>
                <pre>
&lt;script src="//www.webrtc-experiment.com/navigator.customGetUserMediaBar.js"&gt;&lt;/script&gt;
</pre>
            </section>
            <section class="experiment">
                <pre>
/*
 *. https => displaying custom prompt-bar for HTTPs domains!
 *. Keep users privacy as much as possible!
 */

var mediaConstraints = {
    audio: true,
    video: true
};

// navigator.customGetUserMediaBar(mediaConstraints, success_callback, failure_callback);
// arg1==mediaConstraints::: {audio:true, video:true}
// arg2==success_callback::: user accepted the request
// arg3==failure_callback::: user denied   the request

navigator.customGetUserMediaBar(mediaConstraints, function () {

    // now you can invoke "getUserMedia" to seamlessly capture user's media
    navigator.webkitGetUserMedia(mediaConstraints, success_callback, failure_callback);

}, function () {

    // user clicked "Deny" or "x" button
    throw new Error('PermissionDeniedError');

});
</pre>

            </section>
            
            <section class="experiment">
                <h2 class="header" id="feedback">Feedback</h2>
                <div>
                    <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
            </section>
			
            <section class="experiment own-widgets latest-commits">
                <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
                <div id="github-commits"></div>
            </section>  
        </article>
        
        <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/navigator.customGetUserMediaBar" class="fork-left"></a>
        
        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
                © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
                <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            </p>
        </footer>
    
        <!-- commits.js is useless for you! -->
        <script src="//www.webrtc-experiment.com/commits.js" async> </script>
    </body>
</html>
